    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓动之向上取整</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                height: 200px;
                width: 200px;
                border: 1px solid #000000;
                background: crimson;
                left: 0;
                position: absolute;
            }
            #btn{
                margin-bottom: 100px;
            }
        </style>
    </head>
    <body>
    <button id="btn">400</button>
    <div id="box"></div>
    <script>
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');
        var timer=null;
        // var target=400;
        btn.onclick=function () {
            clearInterval(timer);
           timer=setInterval(function () {
            var speed=(400-box.offsetLeft)/10;
            speed=Math.ceil(speed);
            box.style.left=box.offsetLeft+speed+'px';
            console.log("这是多少"+box.style.left);
            console.log((box.style.left)===400);
            if(box.style.left==='400px'){
                alert('到了');
                clearInterval(timer);
            }

           },50);
        }

    </script>
    </body>
    </html>